<template>
	<view class="buy-wrap">
			<view class="wrap-date">
				<text class="wrap-date-go">出发日期</text>
				<picker mode="date" :start="statDate":end="endDate" @change="bindDateChange">
					<text class="wrap-date-now">当前日期 {{nowdates}}</text>
				</picker>
			</view>
			<view class="wrap-date-address">
				<text>出发地</text>
				<view class="address-date">
					<block v-for="(item,index) in adds":key="index">
						<text @click="bcg(index,item.uname)" :class="{active:num==index}">{{item.uname}}</text>
					</block>
				</view>
			</view>
			<view class="wrap-date-number">
				<text class="buy-number">购买数量</text>
				<view class="buy-number-chil">
					<text class="buy-number-chil-people">成人</text>
					<view class="buy-number-str">
						<view>
							<text @click="jian">-</text>
							<text>{{many}}</text>
							<text @click="jia">+</text>
						</view>
						
						<block v-for="(item,index) in buycatData">
							<view class="danjia" style="margin-top: 10upx;">
								<view class="price-buy">单价：￥{{price}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			
			<view class="dingdan">
				<text>￥{{pricess}}</text>
				<view @click="buyCar">
					加入购物车
				</view>
			</view>
			
			<!-- 反馈组件 -->
			<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
			
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	//顶部消息提示插件
	 import HMmessages from "@/components/HM-messages/HM-messages.vue"
	export default {
		data() {
			return {
				buycatData:{},  //仓库带过来的值
				nowdates:'2020-10-01',
				num:1,
				price:"",
				pricess:"",
				many:"1",
				address:'北京',//出发地
				adds:[
					{
						"uname":"榆林"
					},
					{
						"uname":"北京"
					},
					{
						"uname":"上海"
					},
					{
						"uname":"重庆"
					}
				]
			}
		},
		components:{
			HMmessages
		},
		methods: {
			bcg(index,address){
				this.num = index
				// console.log(address)
				this.address = address
			},
			
			bindDateChange(e){
				// console.log(e.detail.value)
				this.nowdates = e.detail.value
			},
			
			//加减操作
			jia(){
				this.many++
				let total = this.price*this.many
				// console.log(total)
				this.pricess = total
			},
			jian(){
				this.many--
				if(this.many<1){
					this.many=1
				}else{
					let total = this.price*this.many
					// console.log(total)
					this.pricess = total
				}
			},
			//加入购物车
			buyCar(){
				let databaseBuycar = {
					nowdates:this.nowdates,
					pricess:this.pricess,
					many:this.many,
					address:this.address,
					buycatData:this.buycatData
				};
				
				const db = wx.cloud.database()
				db.collection('shangping').add({
					data:databaseBuycar,
				})
				.then(res=>{
					console.log(res) 
					this.HMmessages.show("加入购物车成功",{icon:'success',fontColor:'#000000',background:'#61f440',iconColor:'#000000'})
				}).catch(err=>{
					console.log(err)
				})
			}
			
		},
		computed:{
			...mapState(['getdatas']),
			cout(){
				// console.log(this.getdatas.getdataing)
				//全部数据
				this.buycatData=this.getdatas.getdataing
				//单价抽离出来方便加减操作
				this.price = this.getdatas.getdataing[0].wholedata.price
				// console.log(this.price)
			}
		},
		onLoad() {
			this.pricess = this.price
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.wrap-date{
		padding: 20upx 20upx;
		margin-bottom: 30upx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		.wrap-date-go{
			font-weight: bold;
			margin-bottom: 20upx;
		}
		.wrap-date-now{
			color: #5f5f5f;
		}
		.price-buy{
			
		}
	}
	.wrap-date-address{
		padding: 20upx 20upx;
		margin-bottom: 30upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		text{
			font-weight: bold;
			margin: 15upx;	
			padding: 20;
		}
		.address-date{
			display: flex;
			flex-wrap: wrap;
			text{
				background-color: #fffcf0;
				padding: 15upx;
				margin: 10 15upx;
				border-radius: 10upx;
				
			}
		}
	}
	.wrap-date-number{
		padding: 20upx 20upx;
		margin-bottom: 30upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		.buy-number{
			font-weight: bold;
			margin-bottom: 15upx;
		}
		.buy-number-chil{
			display: flex;
			justify-content: space-between;
			.buy-number-str{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				text{
					border: 1px solid #b3b3b3;
					padding: 5upx 17upx;
				}
			}
		}
		
	}
	.active{
		background-color: #ffed1d!important;
	}
	
	.dingdan{
		padding: 5upx 20upx;
		position: fixed;
		bottom: 0;right: 0;
		width: 100%;
		height: 80upx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text{
			margin-left: 30upx;
			color: #c82a0e;
			font-weight: bold;
		}
		view{
			background-color: #ff9215;
			color: #ffffff;
			padding: 15upx 50upx;
			border-radius: 50upx;
		}
	}
</style>
